<template>
  <div
    :style="styles"
    :class="classes"
  >
    <slot></slot>
  </div>
</template>

<script>
let prefixCls = "ifast";
export default {
  name: "CarouselItem",
  componentName: "CarouselItem",
  data() {
    return {
      width: 0,
      height: "auto"
    };
  },
  computed: {
    classes() {
      return [`${prefixCls}-cell`];
    },
    styles() {
      let style = {
        width: `${this.width}px`,
        height: `${this.height}px`
      };
      return style;
    }
  },
  methods: {},
  mounted() {
    // this.$parent.slotChange();
  },
  watch: {
    width(val) {
      if (val && this.$parent.loop) {
        this.$nextTick(() => {
          this.$parent.itemCopyDom();
        });
      }
    },
    height(val) {
      if (val && this.$parent.loop) {
        this.$nextTick(() => {
          this.$parent.itemCopyDom();
        });
      }
    }
  }
};
</script>

<style lang='scss' scoped>
</style>
